<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*单击行改变当前表格行背景色的颜色样式*/
    .changeColor {
        background-color: #bcddff !important;
        color: #333333;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini">

<!--盘点计划新增模态框-->
<div class="modal fade" id="modal-add-check-plan">
    <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">盘点计划新增</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 5px;padding-top: 0px;">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header">
                            </div>
                            <div class="box-body">
                                <form id="modalForm" class="form-horizontal" role="form">
                                    <div hidden>
                                        <input type="hidden" name="cpnId">
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px;">
                                                <label class="form-label col-sm-3"
                                                       style="margin: 0px;padding: 0px;line-height: 35px ">计划盘点时间</label>
                                                <div class="col-sm-9"
                                                     style="margin: 0px;padding: 0px;line-height: 35px;">
                                                    <input name="cpnStart" type="text"
                                                           class="form-control datepicker"
                                                           style="display: inline-block;width: 100px!important;"
                                                           readonly="readonly"> -
                                                    <input name="cpnEnd" type="text"
                                                           class="form-control datepicker"
                                                           style="display: inline-block;width: 100px!important;"
                                                           readonly="readonly">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 110px">
                                                <label class="form-label col-sm-3" for="cpnContent"
                                                       style="margin: 0px;padding: 0px;line-height: 35px">
                                                    盘点内容
                                                </label>
                                                <div class="col-sm-9"
                                                     style="margin: 0px;padding: 0px;">
                                                    <textarea type="text" id="cpnContent" name="cpnContent"
                                                              style="resize: none;height: 100px!important;width: 300px!important;"
                                                              class="form-control" maxlength="500" cols="80" rows="7"
                                                              placeholder="请输入盘点内容"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 110px">
                                                <label class="form-label col-sm-3" for="cpnRemark"
                                                       style="margin: 0px;padding: 0px;line-height: 35px">备注</label>
                                                <div class="col-sm-9"
                                                     style="margin: 0px;padding: 0px;text-align:left">
                                                    <textarea type="text" id="cpnRemark" name="cpnRemark"
                                                              style="resize: none;height: 100px!important;width: 300px!important;"
                                                              class="form-control" maxlength="500" cols="80" rows="7"
                                                              placeholder="请输入备注"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 110px">
                                                <label class="form-label col-sm-3" for="cpnParticipants"
                                                       style="margin: 0px;padding: 0px;line-height: 35px">参与人员</label>
                                                <div class="col-sm-9"
                                                     style="margin: 0px;padding: 0px;">
                                                    <textarea type="text" id="cpnParticipants" name="cpnParticipants"
                                                              style="resize: none;height: 100px!important;width: 300px!important;"
                                                              class="form-control" maxlength="500" cols="80" rows="7"
                                                              placeholder="请输入参与人员"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding-top: 5px;">
                <button type="button" class="btn btn-info"
                        id="btn-save-commit">确定
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>
<section class="content-header">
    <h1>    库存盘点计划</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" class="form-inline">
                        <div class="row" style="margin: 0;">
                            <div class="form-group">
                                <label>
                                    计划编号
                                </label>

                                <input name="cpnCode" type="text" class="form-control text" maxlength="255"
                                       placeholder="请输入计划编号"/>

                            </div>

                            <div class="form-group">
                                <label>
                                    盘点内容
                                </label>

                                <input name="cpnContent" type="text" class="form-control text"
                                       placeholder="请输入盘点内容"/>

                            </div>
                            <div class="form-group">
                                <label>
                                    制作人
                                </label>
                                <input name="cpnMaker" type="text" class="form-control text" maxlength="255"
                                       placeholder="请输入制作人信息"/>
                            </div>
                            <div class="form-group">
                                <label>
                                    计划盘点时间
                                </label>
                                <input type="text" class="form-control datepicker" id="cpnStart"
                                       name="cpnStart" readonly="readonly"/>
                                <span>至</span>
                                <input type="text" class="form-control datepicker" id="cpnEnd"
                                       name="cpnEnd" readonly="readonly"/>
                            </div>

                            <div class="form-group">
                                <label>
                                    整体进度
                                </label>

                                <select name="cpnStatus" class="form-control select">
                                    <option value="" selected>全部</option>
                                    <option value="1">未开始</option>
                                    <option value="2">执行中</option>
                                    <option value="3">已完成</option>
                                </select>

                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-success" id="btn-search">搜索
                                </button>

                            </div>
                        </div>
                    </form>
                </div>
                <div id="toolbar">
                    <button shiro:hasPermission="halinv:halcheckplan:edit" type="button"
                            class="btn btn-info" id="btn_add_check_plan">新增计划
                    </button>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table" class="table table-bordered " width="100%" data-height="500">
                    </table>
                    <h4 id="check-progress-title">盘点整体进度</h4>
                    <table id="check-progress-table" class="table table-bordered " width="100%">
                        <thead>
                        <tr>
                            <th>
                                计划编号
                            </th>
                            <th>
                                盘点计划
                            </th>
                            <th>
                                盘点结果
                            </th>
                            <th>
                                盘点损益调整
                            </th>
                            <th>
                                损益表
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr id="check-progress-table-tbody-firstTr"></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var table;
    var cpnStatus = ["删除", "未开始", "执行中", "已完成"];
    var tableCpnStatus = ["", "未开始", "执行中", "已完成"];

    function loadCheckProgressTable(cpnId) {
        $("#check-progress-title").show();
        $("#check-progress-table").show();
        var rowData = $("#bootstrap-table").bootstrapTable('getRowByUniqueId', cpnId);
        var colorArray = ["#FFFFFF", "#C1C1C1", "#F0AD4E", "#5CB85C"];
        var dispatchUrl = "\\/half\\/halInvManage\\/inventoryCheck\\/plan\\/dispatch"
        var checkResultUrl = "";
        var checkAdjustUrl = "";
        var incomeStatementUrl = "";
        if (rowData.cpnResStatus > 1) {
            if (hasP('halinv:halcheckresult:view')) {
                checkResultUrl = "onclick=\"javascript:location.href=\'" + dispatchUrl + "\\/result\\/" + cpnId + "\'\"";
            }
        }
        if (rowData.cpnAdjStatus != undefined && rowData.cpnAdjStatus > 1) {
            if (hasP('halinv:halcheckadj:view')) {
                checkAdjustUrl = "onclick=\"javascript:location.href=\'" + dispatchUrl + "\\/adjust\\/" + cpnId + "\'\"";
            }
        }
        if (rowData.cpnPalStatus != undefined && rowData.cpnPalStatus > 1) {
            if (hasP('halinv:alchecksub:view')) {
                incomeStatementUrl = "onclick=\"javascript:location.href=\'" + dispatchUrl + "\\/pal\\/" + cpnId + "\'\"";
            }
        }
        $("#check-progress-table-tbody-firstTr").empty();
        $("#check-progress-table-tbody-firstTr").append('<td>' + rowData.cpnCode + '</td>' +
            '<td style="background-color: ' + colorArray[rowData.cpnPlanStatus] + '">' + tableCpnStatus[rowData.cpnPlanStatus] + '</td>' +
            '<td onmouseover="changeCursor(this)" ' + checkResultUrl + ' style="background-color: ' + colorArray[rowData.cpnResStatus] + '">' + tableCpnStatus[rowData.cpnResStatus] + '</td>' +
            '<td onmouseover="changeCursor(this)" ' + checkAdjustUrl + ' style="background-color: ' + colorArray[rowData.cpnAdjStatus] + '">' + tableCpnStatus[rowData.cpnAdjStatus] + '</td>' +
            '<td onmouseover="changeCursor(this)" ' + incomeStatementUrl + 'style="background-color: ' + colorArray[rowData.cpnPalStatus] + '">' + tableCpnStatus[rowData.cpnPalStatus] + '</td>');
    }


    /**更改鼠标样式*/
    function changeCursor(obj) {
        $(obj).css("cursor", "pointer");
    }

    /**
     *@FunctionName: search
     *@Description: 查询
     *@Author: TH
     *@CreateDate: 2020/4/10 16:10
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function search() {
        js.table.search(table);
    }

    $(function () {
        //加载列表数据
        table = js.table.init({
            id: 'bootstrap-table',
            url: ctx + "half/halInvManage/inventoryCheck/plan/list",
            showColumns: true,
            showExport: false,
            pageSize: 300,
            striped: false,
            uniqueId: "cpnId",
            rowStyle: function (row, index) {
                if (row.cpnStatus == 0) {
                    return {css: {"background": "red", "color": "white"}}
                } else {
                    return {css: {}}
                }
            },
            onClickRow: function (row, $element) {
                loadCheckProgressTable(row.cpnId);
                $('.changeColor').removeClass('changeColor');//移除class
                $($element).addClass('changeColor');//添加class
            },
            onLoadSuccess: function (data) {
                if (data.rows.length > 0) {
                    $("#bootstrap-table tbody tr:first-child").addClass('changeColor');
                    if (data.rows.cpnStatus != 0) {
                        loadCheckProgressTable(data.rows[0].cpnId);
                        $("#check-progress-title").show();
                        $("#check-progress-table").show();
                    }
                } else {
                    $("#check-progress-title").hide();
                    $("#check-progress-table").hide();
                }
                $('#bootstrap-table thead th').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
                $('#bootstrap-table tbody tr:first td').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
            },
            columns: [
                {
                    title: '序号', field: 'cpnId', width: '40',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: '计划编号', field: 'cpnCode', width: '150'},
                {title: '盘点内容', field: 'cpnContent', width: '150'},
                {title: '备注', field: 'cpnRemark', width: '150'},
                {title: '计划盘点时间范围', field: 'cpnDateTimeRange', width: '200'},
                {title: '制作人', field: 'cpnMaker', width: '150'},
                {title: '参与人员', field: 'cpnParticipants'},
                {
                    title: '整体进度', field: 'cpnStatus'
                    , formatter: function (value, row, index) {
                        if (value == undefined) {
                            return "";
                        }
                        return cpnStatus[value];
                    },
                    cellStyle: function (value, row, index) {
                        if (value == 1) {
                            return {css: {"background": "#C1C1C1"}}
                        } else if (value == 2) {
                            return {css: {"background": "#F0AD4E"}}
                        } else if (value == 3) {
                            return {css: {"background": "#5CB85C"}}
                        } else {
                            return {css: {"background": "red", "color": "white"}}
                        }
                    }
                },
                {
                    title: '操作', field: 'cpnId', width: '110',
                    formatter: function (value, row, index) {
                        var htmlText = "";
                        if (row.cpnPlanStatus != 3 && row.cpnStatus != 0) {
                            if (hasP('halinv:halcheckadd:view')) {
                                htmlText += '<button class="btn btn-info btn-xs" onclick="addDetail(' + row.cpnId + ')">添加</button>';
                            }
                            if (hasP('halinv:halcheckplan:edit')) {
                                htmlText += '<button  class="btn btn-success btn-xs" onclick="submitCheckPlan(' + row.cpnId + ')">提交</button>';
                                htmlText += '<button onclick="showEditPanel(' + row.cpnId + ')" class="btn btn-warning btn-xs" data-id="' + row.ipmId + '">修改</button>';
                                htmlText += '<button  onclick="removeCheckPlan(' + row.cpnId + ')" class="btn btn-xs btn-danger">删除</button>';
                            }
                        }
                        if (row.cpnPlanStatus == 3) {
                            if (hasP('halinv:halcheckadd:view')) {
                                htmlText += '<button class="btn btn-info btn-xs" onclick="viewDetail(' + row.cpnId + ')">查看</button>';
                            }
                            if (hasP('halinv:halcheckplan:edit')) {
                                htmlText += '<button class="btn btn-primary btn-xs" onclick="revokeCheckPlan(' + row.cpnId + ')">撤销</button>';
                            }
                        }
                        return htmlText;
                    }
                }
            ]
        });
        /**
         * 表格搜索
         */
        $("#btn-search").on('click', function () {
            js.table.search(table);
        });
        /**
         *@Description: 新增盘点计划
         *@Author: TH
         *@CreateDate: 2020/4/25 8:01
         *@Phone: 18241927380
         *@Version: 1.0.0
         */
        $("#btn_add_check_plan").on('click', function () {
            //销毁表单验证
            $("#modalForm").data('bootstrapValidator').destroy();
            //置空表单验证
            $('#modalForm').data('bootstrapValidator', null);
            //重新绑定表单验证
            formValidator("modalForm");
            //重置表单内容
            $("#modalForm")[0].reset();
            $("#modalForm [name='cpnId']").val('');

            //打开添加模态框
            js.modal.open("modal-add-check-plan");
        });

        /**
         *@Description: 保存盘点计划
         *@Author: TH
         *@CreateDate: 2020/4/25 8:01
         *@Phone: 18241927380
         *@Version: 1.0.0
         */
        $("#btn-save-commit").on('click', function () {
            //销毁表单验证
            $("#modalForm").data('bootstrapValidator').destroy();
            //置空表单验证
            $('#modalForm').data('bootstrapValidator', null);
            //重新绑定表单验证
            formValidator("modalForm");
            //验证通过式提交
            js.validSubmit({
                formId: "modalForm",
                url: ctx + "half/halInvManage/inventoryCheck/plan/save",
                data: new FormData($("#modalForm")[0]),
                success: function (result) {
                    js.modal.hide("modal-add-check-plan");
                    js.modal.success("保存盘点计划成功！");
                    js.table.refresh(table);
                }
            });
        })
        //加载表单验证
        formValidator("modalForm");
    });


    /**
     *@FunctionName: formValidator
     *@Description: 验证初始化
     *@Author: TH
     *@CreateDate: 2020/4/25 11:14
     *@Phone: 18241927380
     *@Param: [formId] formId
     *@Version: 1.0.0
     */
    function formValidator(formId) {
        // 验证初始化
        js.validate.init(formId, {
            fields: {
                cpnContent: {
                    validators: {
                        notEmpty: {message: '请输入盘点内容'}
                    }
                }
                // ,
                // cpnRemark: {validators: {notEmpty: {message: '请输入备注'}}},
                // cpnParticipants: {validators: {notEmpty: {message: '请输入参与人员'}}},
                // cpnDateTimeRange: {
                //     validators: {
                //         notEmpty: {message: '请选择预计盘点时间'}
                //     }
                // }
            }
        });
    }

    /**
     *@Description: 显示修改盘点计划面板
     *@Author: TH
     *@CreateDate: 2020/4/25 9:35
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function showEditPanel(cpnId) {
        //销毁表单验证
        $("#modalForm").data('bootstrapValidator').destroy();
        //置空表单验证
        $('#modalForm').data('bootstrapValidator', null);
        //重新绑定表单验证
        formValidator("modalForm");
        //重置表单内容
        $("#modalForm")[0].reset();
        //根据唯一主键获取该行数据
        var rowData = $("#bootstrap-table").bootstrapTable('getRowByUniqueId', cpnId);
        //使用表单回显，回显数据
        $("#modalForm").fillData(rowData);
        //打开添加模态框（实际用于修改）
        js.modal.open("modal-add-check-plan");
    }

    /**
     *@FunctionName: removeAppy
     *@Description: 删除
     *@Author: TH
     *@CreateDate: 2020/4/21 13:09
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function removeCheckPlan(cpnId) {
        $.post(ctx + 'half/halInvManage/inventoryCheck/plan/remove', {
            cpnId: cpnId
        }, function (result) {
            if (result.type == "SUCCESS") {
                js.table.refresh(table);
                loadCheckProgressTable(cpnId);
            }
        }, 'json');
    }

    /**
     *@FunctionName: submitCheckPlan
     *@Description: 提交
     *@Author: TH
     *@CreateDate: 2020/4/21 13:09
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function submitCheckPlan(cpnId) {
        js.modal.confirm("您确认要提交此计划吗？", function () {
            $.post(ctx + 'half/halInvManage/inventoryCheck/plan/submit', {
                cpnId: cpnId
            }, function (result) {
                if (result.type == "SUCCESS") {
                    js.table.refresh(table);
                }
            }, 'json');
        });
    }

    /**
     *@FunctionName: submitCheckPlan
     *@Description: 撤销
     *@Author: TH
     *@CreateDate: 2020/4/21 13:09
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function revokeCheckPlan(cpnId) {
        js.modal.confirm("您确认要撤销此计划吗？", function () {
            $.post(ctx + 'half/halInvManage/inventoryCheck/plan/revoke', {
                cpnId: cpnId
            }, function (result) {
                if (result.type == "SUCCESS") {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                } else {
                    js.modal.warning(result.msg);
                }
            }, 'json');
        });
    }

    /**
     *@FunctionName: addDetail
     *@Description: 跳转到添加明细
     *@Author: TH
     *@CreateDate: 2020/4/25 13:53
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function addDetail(cpnId) {
        location.href = ctx + "half/halInvManage/inventoryCheck/detail/" + cpnId;
    }

    /**
     *@FunctionName: viewDetail
     *@Description: 跳转到查看明细
     *@Author: TH
     *@CreateDate: 2020/4/25 13:53
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function viewDetail(cpnId) {
        location.href = ctx + "half/halInvManage/inventoryCheck/detail/view/" + cpnId;
    }
</script>
</body>
</html>
